﻿<div class="layui-card" id="lg-Reserve-ActivityList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>活动列表</div>
    <div class="layui-card-body" id="">
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAdd"><i class="fa fa-file-excel-o fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="Refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check">
                                序号
                            </th>
                            <th>活动名称</th>
                            <th>单活动报名链接</th>
                            <th style="width:120px">已报/名额</th>
                            <th style="width:120px">开放</th>
                            <th style="width:120px">签到</th>
                            <th style="width:120px">确认</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in table.data">
                            <td class="lg-table-check">
                                {{index+1}}
                            </td>
                            <td>{{row.Title}}</td>
                            <td>{{domain}}/reserve/Activity/{{row.Id}}</td>
                            <td>{{row.Register||0}} / {{row.Limit}}</td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsOpen==1}]" v-on:click="SetIsOpen(row)">
                                    <em>{{row.IsOpen==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsOpenSign==1}]" v-on:click="SetIsOpenSign(row)">
                                    <em>{{row.IsOpenSign==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsConfirm==1}]" v-on:click="SetIsConfirm(row)">
                                    <em>{{row.IsConfirm==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="OnEdit(row)" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" v-on:click="OnDelete(row)" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="table.data.length==0||table.loading">
                    <p v-if="!table.loading">没有数据 ~</p>
                    <p v-if="table.loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-ReserveFormList" style="margin-top:-10px;"></div>
        </div>
    </div>
</div>
<script>
    var page = frame.createPage({
        mounted: function () {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        table: {
                            data: [],
                            where: {
                                page: 1,
                                limit: 10
                            },
                            loading: false
                        },
                        domain: window.location.origin
                    }
                },
                mounted: function () {
                    this.GetActivityList();
                },
                methods: {
                    GetActivityList: function () {
                        this.table.loading = true;
                        this.table.data = [];
                        lg.request({
                            url: "/api/sys/reserve/GetActivityList",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    this.table.data = res.data || [];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.table.loading = false;
                            }
                        })
                    },
                    setPage: async function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-ReserveFormList'
                            , curr: that.table.where.page
                            , limit: that.table.where.limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.table.where.page = obj.curr;
                                    that.table.where.limit = obj.limit;
                                    that.GetPlans();
                                }
                            }
                        });
                    },
                    Refresh: function () {
                        this.GetActivityList();
                    },
                    OnAdd: function () {
                        frame.NavigateTo({
                            url: "/lgm/reserve/activity/add/",
                            title: "添加活动"
                        })
                    },
                    OnEdit: function (item) {
                        frame.NavigateTo({
                            url: "/lgm/reserve/activity/info/" + item.Id,
                            title: "活动详情"
                        })
                    },
                    OnDelete: function (item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确认执行?", function (index) {
                            layer.close(index);
                            lg.request({
                                url: "/api/sys/reserve/DeleteActivity",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("删除成功！", { icon: 1 });
                                        that.GetActivityList();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            })
                        })
                    },
                    Check: function (item) {
                        var use = item.IsUsing == 1 ? 0 : 1;
                        lg.request({
                            url: "/api/sys/reserve/CheckForm",
                            method: "post",
                            data: { id: item.Id, IsUsing: use },
                            success: res => {
                                if (res.code == 0) {
                                    item.IsUsing = use;
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    SetIsOpen: function (item) {
                        var open=item.IsOpen==1?0:1;
                        lg.request({
                            url: "/api/sys/reserve/EditActivity",
                            method: "post",
                            data: { id: item.Id, IsOpen: open },
                            success: res => {
                                if (res.code == 0) {
                                    item.IsOpen = open;
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })

                    },
                    SetIsConfirm: function (item) {
                        var confirm=item.IsConfirm==1?0:1;
                        lg.request({
                            url: "/api/sys/reserve/EditActivity",
                            method: "post",
                            data: { id: item.Id, IsConfirm: confirm },
                            success: res => {
                                if (res.code == 0) {
                                    item.IsConfirm = confirm;
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })

                    },
                    SetIsOpenSign: function (item) {
                        var openSign = item.IsOpenSign == 1 ? 0 : 1;
                        if (item.IsDefault != 1) {
                            lg.request({
                                url: "/api/sys/reserve/EditActivity",
                                method: "post",
                                data: { id: item.Id, IsOpenSign: openSign },
                                success: res => {
                                    if (res.code == 0) {
                                        item.IsOpenSign = openSign;
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        } else {
                            layer.msg("当前项已经是默认表单", { icon: 2, anim: 6 })
                        }

                    }
                }
            }).mount("#lg-Reserve-ActivityList")
        },
        methods: {
            reload: function () {
                this.vm.Refresh();
            }
        }
    }).mount();


</script>
